<template>
  <div class="message-container" :class="{ right: value.from + '' == user.userId }">
    <!-- {{ value }} -->
    <div class="avatar">
      <avatar :src="`/api/${props.avatar}`" size="small"></avatar>
    </div>
    <div class="message-wrapper">
      <div class="time">{{ parseTime(value.time) }}</div>
      <div class="message" v-html="value.data"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useUserStore } from "@/stores/user";
import Avatar from "@/components/Avatar.vue";
const Message = {
  id: String || Number,
  from: String || Number,
  to: String || Number,
  data: Object,
  time: Number || Date,
};

interface Message {
  id?: string | number;
  message: string;
  userId: string | number;
  time: Date | string | number;
}

const props = defineProps({
  value: {
    type: Object as () => typeof Message,
    required: true,
  },
  avatar: String,
});

const userStore = useUserStore();

const user = computed(() => userStore.userinfo);

function parseTime(dateTime: Date | number | string) {
  const date = new Date(dateTime);
  const now = new Date();

  // 判断是否为当年
  if (date.getFullYear() === now.getFullYear()) {
    // 判断是否为当天
    if (date.getMonth() === now.getMonth() && date.getDate() === now.getDate()) {
      // 当天，只显示时间
      return date.toLocaleTimeString([], {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
      });
    } else {
      // 不是当天，显示日月和时间
      return (
        date
          .toLocaleDateString([], { year: "numeric", month: "2-digit", day: "2-digit" })
          .replace(/\//g, "-") +
        " " +
        date.toLocaleTimeString([], {
          hour: "2-digit",
          minute: "2-digit",
          second: "2-digit",
          hour12: false,
        })
      );
    }
  } else {
    // 不是当年，显示完整日期时间
    return date
      .toLocaleString([], {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false,
      })
      .replace(/\//g, "-");
  }
}
</script>

<style scoped lang="less">
.right {
  flex-direction: row-reverse;

  & > .message-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  & .message::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: -6px !important;
    left: unset;
    top: 0.5rem;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid var(--app-main-color);
    transform: rotate(60deg);
  }
}
.message-container {
  display: flex;
  // float: left;
  // width: 30rem;
  width: 100%;

  .avatar {
    padding: 10px;
    padding-top: 0.5rem;
    user-select: none;
  }

  .message-wrapper {
    margin: 0 5px 10px 0;
    width: 100%;
    .time {
      color: rgba(0, 0, 0, 0.5);
      font-size: 0.625rem;
    }
  }
}
.message {
  background: var(--app-main-color);
  // margin: 10px 5px;
  width: 80%;
  // display: flex;
  color: #fff;
  padding: 10px;
  border-radius: 10px;
  max-width: calc(100% - 3rem);
  width: fit-content;
  white-space: pre-wrap;
  word-wrap: break-word;
  // // word-wrap: break-word;
  // word-break: break-all;

  &::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -6px;
    top: 0.5rem;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 12px solid var(--app-main-color);
    transform: rotate(-60deg);
  }
}
</style>
